<template>
<div>
  <el-container style="border-bottom: 2px solid black">
    <el-aside width="200px" id="c1">
      <el-col id="left—product">
        <div class="grid-content bg-purple">
          商品分类
        </div>
      </el-col>
      <el-aside width="200px">
        <el-menu default-active="2"
                 class="el-menu-vertical-demo"
                 :unique-opened="true"
                 @open="handleOpen"
                 @close="handleClose"
                 style="background-color: deepskyblue; font-family: 幼圆">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-help"></i>猫猫商品</template>
            <el-menu-item index="1-1">猫猫玩具</el-menu-item>
            <el-menu-item index="1-2">猫猫食品</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-help"></i>狗狗商品</template>
            <el-menu-item index="2-1">狗狗玩具</el-menu-item>
            <el-menu-item index="2-2">狗狗食品</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-s-help"></i>奇趣小宠</template>
            <el-menu-item index="3-1">小宠玩具</el-menu-item>
            <el-menu-item index="3-2">小宠食品</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title"><i class="el-icon-help"></i>水族市场</template>
            <el-menu-item index="3-1">水宠食物</el-menu-item>
            <el-menu-item index="3-2">水宠玩具</el-menu-item>
          </el-submenu>
          <el-menu-item index="3-1"><i class="el-icon-s-help"></i>宠物周边</el-menu-item>
        </el-menu>
        <div id="i-aside-dog"><img src="../../../public/dog3.gif" height="100" width="120"/></div>
      </el-aside>
    </el-aside>
    <el-main id="iimain">
      <div id="bigi">
        <div id="i">
          <!--导航栏结束-->
          <div id="i1">
            <el-col id="middle—product">
              <div class="grid-content bg-purple-light">
                <a href="">首页</a>
                <a href="">猫猫</a>
                <a href="">狗狗</a>
                <a href="">小宠</a>
                <a href="">水族</a>
                <a href="">周边</a>
              </div>
            </el-col>
          </div>
          <div>
            <!--轮播图开始-->
            <template>
              <div class="block">
                <span class="demonstration">默认 Hover 指示器触发</span>
                <el-carousel trigger="click" height="300px">
                  <el-carousel-item v-for="b in bannerArr">
                    <img :src="b.url" width="100%" alt="">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </template>
            <!--轮播图结束-->
          </div>
        </div>
        <div id="ii">
          <el-col id="right—product">
            <div class="grid-content bg-purple">
              <i class="el-icon-shopping-cart-full"></i>
              <a href=""> 购物车</a>
            </div>
          </el-col>
          <!--排行榜开始-->
          <el-card class="box-card">
            <h3>
              <i style="font-weight: bold" class="el-icon-trophy"> 销量最高</i>
            </h3>
            <el-table :data="topArr">
              <el-table-column type="index" label="排名"></el-table-column>
              <el-table-column prop="title" label="商品标题"></el-table-column>
              <el-table-column prop="saleCount" label="商品销量"></el-table-column>
            </el-table>
          </el-card>
          <!--排行榜结束-->
        </div>
      </div>
    </el-main>
  </el-container>
  <!--火爆商品-->
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="4"><div class="grid-content" id="i-aside-hot" style="background-color: white"><h2>火爆商品</h2></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content" id="i-aside-hot2"><h2><a href=""> 查看更多>></a></h2></div></el-col>
      </el-row>
      <el-row id="i-hot">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
      </el-row>
    </el-main>
  </el-container>
  <br>
  <!--知名品牌-->
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"><h2>知名品牌 放心选择</h2></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content"><h2><a href=""> 查看更多品牌>></a></h2></div></el-col>
      </el-row>
      <el-row id="i-hot">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
      </el-row>
    </el-main>
  </el-container>
  <br>
  <!--关爱宠物-->
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"><h2>关爱宠物</h2></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content"><h2><a href=""> 查看更多知识>></a></h2></div></el-col>
      </el-row>
      <el-row id="i-hot">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content"></div></el-col>
      </el-row>
    </el-main>
  </el-container>
  <br>
  <!--客户暖评&关注我们-->
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"><h2>客户暖评</h2></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content"><h2>关注我们</h2></div></el-col>
      </el-row>
      <el-row id="i-hot">
        <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content"></div></el-col>
      </el-row>
    </el-main>
  </el-container>
  <br>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row id="i-guarantee-pet" type="flex" class="row-bg" justify="center">
        <el-col :span="4"><div class="grid-content-pet "><img src="../../../public/dog12.gif" height="80" width="275"/></div></el-col>
        <el-col :span="4"><div class="grid-content-pet "><img src="../../../public/dog6.gif" height="80" width="275"/></div></el-col>
        <el-col :span="4"><div class="grid-content-pet "><img src="../../../public/dog.gif" height="80" width="275"/></div></el-col>
        <el-col :span="4"><div class="grid-content-pet "><img src="../../../public/dog8.gif" height="80" width="275"/></div></el-col>
        <el-col :span="4"><div class="grid-content-pet "><img src="../../../public/dog10.gif" height="80" width="275"/></div></el-col>
      </el-row>
    </el-main>
  </el-container>
  <br>
  <!--正品保障-->
  <el-container>
    <el-main id="i-guarantee-bg">
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row id="i-guarantee" type="flex" class="row-bg" justify="center">
        <el-col :span="3"><div class="grid-content bg-purple"><a href=""><img src="../../../public/icon1.png"
                                                                              height="34" width="34"/>正品保障</a></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"><a href=""><img src="../../../public/icon2.png"
                                                                              height="34" width="34"/>品类丰富</a></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"><a href=""><img src="../../../public/icon3.png"
                                                                              height="34" width="34"/>优质服务</a></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"><a href=""><img src="../../../public/icon4.png"
                                                                              height="34" width="34"/>科学养宠</a></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"><a href=""><img src="../../../public/icon5.png"
                                                                              height="34" width="34"/>E宠公益</a></div></el-col>
      </el-row>
    </el-main>
  </el-container>
  <br>
  <!--底部栏-->
  <el-container>
    <el-main>
      <el-row id="i-guarantee-bottom" type="flex" class="row-bg" justify="center">
        <el-col :span="18"><div class="grid-content"><a href="">关于萌趣</a><img src="../../../public/ppxc.png"> <a href="">投资者关系</a><img src="../../../public/ppxc.png"> <a href="">诚聘英才</a><img src="../../../public/ppxc.png"> <a href="">联系我们</a><img src="../../../public/ppxc.png"> <a href="">网站地图</a><img src="../../../public/ppxc.png"> <a href="">意见反馈</a><img src="../../../public/ppxc.png"> <a href="">帮助中心</a><img src="../../../public/ppxc.png"> <a href="">客服热线：400-889-1919</a></div></el-col>
      </el-row>
      <el-row id="i-guarantee-bottom" type="flex" class="row-bg" justify="center">
        <el-col :span="18"><div class="grid-content"><img src="../../../public/beian.png"><a href="">沪公网安备 31011502004956号 </a><img src="../../../public/ppxc.png"> <a href="">沪ICP备13034501号-2</a><img src="../../../public/ppxc.png"> <a href="">增值电信业务经营许可证： 沪B2-20140120</a></div></el-col>
      </el-row>
      <el-row id="i-guarantee-bottom" type="flex" class="row-bg" justify="center">
        <el-col :span="18"><div class="grid-content">Copyright © 2007-2023 Boqii.com All Rights Reserved 宠爱（上海）信息科技有限公司 版权所有</div></el-col>
      </el-row>
      <el-row id="i-guarantee-bottom" type="flex" class="row-bg" justify="center">
        <el-col :span="18"><div class="grid-content"><img src="../../../public/foot_gs.png">&emsp;<img src="../../../public/foot_cx.png">&emsp;<img src="../../../public/foot_kx.png">&emsp;<img src="../../../public/foot_zx.png"></div></el-col>
      </el-row>
      <el-row id="i-guarantee-bottom" type="flex" class="row-bg" justify="center">
        <el-col :span="18"><div class="grid-content">违法和不良信息举报电话：021-65840163 <img src="../../../public/ppxc.png">举报邮箱：mengqu@163.com</div></el-col>
      </el-row>
    </el-main>
  </el-container>
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1; /*顶部颜色*/
color: #333;
text-align: center;
line-height: 60px;
padding: 0;
}

.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
overflow: hidden;
}

.el-main {
/* background-color: #E9EEF3;*//*搜索栏及logo背景颜色*/
color: #333;
text-align: center;
line-height: 160px;
line-height: 30px;
padding: 0;
}

.grid-content {
min-height: 36px;
}

/*设置导航滚动条*/
.page-scroll {
height: 100%;
}

.page-scroll .el-scrollbar__wrap {
overflow-x: hidden;
}

.el-aside::-webkit-scrollbar {
display: inline;
}
a{
text-decoration: none;
color: black;
}
/*火热商品行高*/
#i-aside-hot,#i-aside-hot2{
min-height: 80px;
line-height: 80px;
}
/*左侧商品分类栏*/
#left—product {
background-color: dodgerblue;
font-family: 幼圆;
font-weight: bolder;
font-size: 20px;
border: 1px solid black;
box-sizing: border-box;
border-radius: 5px;
line-height: 50px;

}
/*左侧背景图*/
#i-aside-dog{
position: absolute;
margin-bottom: 0;
}
#i-aside-dog>img{
width: 120px;
height: 100px;
z-index: -2;
margin-left: 35px;
}
/*中部商品分栏*/
#middle—product {
background-color: beige;
border: 1px solid black;
box-sizing: border-box;
height: 60px;
border-radius: 4px;
}

/* 中部分类链接样式*/
#middle—product > div > a {
text-decoration: none;
color: #a4a1ff;
font-family: 幼圆;
font-weight: bolder;
z-index: 11;
text-decoration: none;
margin-left: 50px;
font-size: 20px;
line-height: 50px;
}

#middle—product > div > a:hover {
color: #000;
font-size: 30px;
}

/*右部分类链接样式*/
#right—product > div > a {
color: deeppink;
font-family: 幼圆;
font-weight: bolder;
z-index: 11;
text-decoration: none;
margin-left: 50px;
font-size: 20px;
}

/*右侧购物车*/
#right—product {
height: 60px;
width: 100%;
font-family: 幼圆;
font-weight: bolder;
float: right;
background-color: #a4a1ff;
border-radius: 4px;
border: 1px solid black;
}

#right—product > div > a {
margin-left: 20px;
line-height: 50px;
}

#right—product > div > a:hover {
color: #666666;
font-size: 30px;
}

/*右侧购物车结束*/
#bigi {
width: 100%;
}

#i {
width: 80%;
padding-top: 0;
float: left;
}

#ii {
width: 20%;
position: relative;
float: right;
}
/*右侧排名*/
.box-card {
height:372px;
}
/*火爆商品区域*/
/*火爆商品*/
.grid-content>h2{
text-align: left;
font-family: 幼圆;
margin-left: 20px;
}
/*火爆商品到客户暖评*/
#i-hot>div{
height:250px;
background-color: #a4a1ff;
border: 1px solid black;
border-radius: 5px;
}
/*宠物图组*/
.grid-content-pet>img{
display: block;
width: 275px;
height: 80px;
}
/*正品保障背景*/
#i-guarantee-bg{
background-color: palevioletred;
}
/*正品保障*/
#i-guarantee>div {
height: 200px;
line-height: 200px;
}
/*宠物周边按钮*/
.el-menu-item.is-active{
  color: black;
}
</style>
<script>
export default {
  name: "indexView",
  data:function (){
    return{
      bannerArr:[],
      topArr:[],
      productArr:[],
    }
  },
  methods:{

  },
  created:function () {
    //获取轮播图数据
    axios.get("/banner/select").then(function (response) {
      exports.bannerArr = response.data;
    })
    //获取排行榜数据
    axios.get("/product/selectTop").then(function (response) {
      exports.topArr = response.data;
    })
    //获取商品数据
    axios.get("/product/selectIndex").then(function (response) {
      exports.productArr = response.data;
    })
  }
}
</script>